<template>
  <el-form
    :model="formValue"
    class="model-operate-form"
    :rules="rules"
    ref="formRef"
    label-width="100px"
  >
    <el-form-item
      class="model-operate-form-item model-operate-form-special"
      prop="operateWay"
    >
      <template #label>
        <span>为扫码者设置需执行的操作，请选择类型</span>
        <span
          v-if="formValue.operateWay"
          @click="setOperateInitail"
          class="model-operate-form-special-icon"
          >重新选择</span
        >
      </template>
      <div
        v-for="(item, index) in operateList.list"
        :key="Math.random()"
        class="model-operate-form-item-list"
      >
        <div class="model-operate-form-item-list-left">
          <div class="model-operate-form-item-list-left-title">
            {{ item.title }}
          </div>
          <div class="model-operate-form-item-list-left-remark">
            {{ item.remark }}
          </div>
        </div>
        <el-button
          @click="setOperateWay(item)"
          :disabled="formValue.operateWay ? true : false"
          type="primary"
          class="model-operate-form-item-list-right"
          >{{ item.btnHint }}</el-button
        >
      </div>
    </el-form-item>
    <el-form-item class="model-operate-form-item" label="谁能操作" prop="auth">
      <el-radio-group v-model="formValue.auth">
        <el-radio value="1" size="large">任何人</el-radio>
        <el-radio value="2" size="large">指定角色</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      class="model-operate-form-item"
      label="操作项名称"
      prop="name"
    >
      <el-input clearable maxlength="10" v-model="formValue.name"></el-input>
    </el-form-item>
    <template v-if="props.type == 'flow'">
      <el-form-item
        class="model-operate-form-item"
        label="操作项描述"
        prop="nameDetail"
      >
        <el-input
          clearable
          maxlength="30"
          v-model="formValue.nameDetail"
        ></el-input>
      </el-form-item>
      <el-form-item
        class="model-operate-form-item"
        label="按钮名称"
        prop="btnName"
      >
        <el-input
          clearable
          maxlength="5"
          v-model="formValue.btnName"
        ></el-input>
      </el-form-item>
      <el-form-item
        class="model-operate-form-item"
        label="按钮颜色"
        prop="btnColor"
      >
        <div style="display: flex">
          <div
            v-for="(item, index) in colorList"
            :key="Math.random()"
            @click="choosedColor(index)"
          >
            <div
              :style="{
                backgroundColor: item,
                width: '0.9rem',
                height: '0.9rem',
                margin: '0 1rem 0 0',
                border: '3px solid white',
                boxShadow: `0 0 0 2px ${
                  checkedColorIndex == index ? item : '#ededed'
                }`,
              }"
            ></div>
          </div>
        </div>
      </el-form-item>
    </template>
    <el-form-item
      v-else
      class="model-operate-form-item"
      label="图标"
      prop="icon"
    >
      <el-popover placement="bottom">
        <template #reference>
          <el-image
            :src="formValue.icon || testPic"
            fit="contain"
            class="model-operate-form-item-img"
          ></el-image>
        </template>
        <div
          class="model-operate-form-item-select"
          style="cursor: pointer"
          @click="picSelectVisible = true"
        >
          从素材库选取
        </div>
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          style="text-align: center"
          :show-file-list="false"
          :auto-upload="false"
        >
          <template #trigger>
            <div class="model-operate-form-item-select" style="cursor: pointer">
              本地上传
            </div>
          </template>
        </el-upload>
      </el-popover>
    </el-form-item>
  </el-form>

  <el-dialog
    v-model="picSelectVisible"
    title="选择图片"
    :before-close="closePicSelect"
    width="400px"
  >
    <div style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem">
      <el-image
        v-for="(item, index) in 20"
        @click="choosePic(item)"
        :src="index==8?testpic2:testPic"
        fit="contain"
        style="width: 3rem; height: 3rem"
      ></el-image>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive,onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const formValue = defineModel("formValue");
const formRef = ref();
const picSelectVisible = ref(false);
const closePicSelect = () => {
  picSelectVisible.value = false;
};
const rules = {
  operateWay: [
    { required: true, message: "请选择操作方式", trigger: "change" },
  ],
  unitName: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
  auth: [{ required: true, message: "请选择操作人", trigger: "change" }],
  name: [{ required: true, message: "请输入操作项名称", trigger: "blur" }],
  btnName: [{ required: true, message: "请输入按钮名称", trigger: "blur" }],
  btnColor: [{ required: true, message: "请选择按钮颜色", trigger: "change" }],
  icon: [{ required: true, message: "请选择图标", trigger: "change" }],
};
const testPic =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
const testpic2 =
  "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
});

onMounted(()=>{
  if(formValue.value && formValue.value.btnColor){
    checkedColorIndex.value = colorList.findIndex(
      (item) => item == formValue.value.btnColor
    );
    // formValue.value.icon = testpic2;
  }
})
const setOperateWay = (item) => {
  formValue.value.operateWay = item.title;
  if (item.title == "填写表单") {
    operateList.list[0].btnHint = "已选择";
    // todo
    router.push({
      path: "/lowCodeFormList",
    });
  } else {
    operateList.list[1].btnHint = "已设置";
  }
};
const setOperateInitail = () => {
  formValue.value.operateWay = "";
  operateList.list[0].btnHint = "选择表单";
  operateList.list[1].btnHint = "设置链接";
};
const choosePic = (item) => {
  formValue.value.icon = testpic2;
  picSelectVisible.value = false;
};
const operateList = reactive({
  list: [
    {
      title: "填写表单",
      remark: "可让扫码者填写表单内容，规范收集数据",
      btnHint: "选择表单",
    },
    {
      title: "跳转链接",
      remark: "支持跳转到标识码、网址、小程序等",
      btnHint: "设置链接",
    },
  ],
});
const colorList = [
  "#108EE9",
  "#C74C49",
  "#DD7E2E",
  "#EBA630",
  "#1CA04C",
  "#108EE9",
  "#3F10E9",
];
const checkedColorIndex = ref();
const choosedColor = (index) => {
  checkedColorIndex.value = index;
  // console.log(444, checkedColorIndex.value);
  formValue.value.btnColor = colorList[index];
};
</script>
<style lang="scss"></style>
